<template>
    <div>
        <yd-list theme="4">
            <yd-list-item v-for="(item, index) in list" :key="index">
                <img slot="img" :src="item.headimgurl" class="order-img">
                <span slot="title">{{item.order_no}}</span>
                <yd-list-other slot="other">
                    <div>
                        <div class="demo-list-price">网点：{{item.shop_name}}</div>
                        <div class="demo-list-price">地址：{{item.address}}</div>
                        <div class="demo-list-price">下单时间：{{item.create_time}}</div>
                        <div style="color: red;font-weight: bold">
                            <yd-button type="primary" v-if="item.state===1">未使用</yd-button>
                            <yd-button type="warning" v-else>已经使用</yd-button>
                        </div>
                    </div>
                    <div>
                        <yd-button type="primary" @click.native="del(item)">删除</yd-button>
                    </div>
                </yd-list-other>
            </yd-list-item>
        </yd-list>
        <yd-popup v-model="show1" position="center" width="90%">
            <div class="wl-order-qrcode">
                <div id="qrCode" ref="qrCode"></div>
                <div class="qrcode-btn">
                    <yd-button @click.native="show1 = false">关闭</yd-button>
                </div>
            </div>
        </yd-popup>
    </div>
</template>

<script type="text/babel">
import { managerOrderList, delOrder } from '@/api/kouzhao.js'
import QRcode from 'qrcodejs2'

export default {
  data () {
    return {
      list: [],
      params: {},
      show1: false
    }
  },
  methods: {
    getShopList () {
      managerOrderList().then(ret => {
        let result = ret.data
        if (result.errcode === 1001) {
          if (result.data.length > 0) {
            this.list = result.data
          } else {
            this.$dialog.alert({ mes: '没有数据！' })
          }
        } else {
          this.$dialog.alert({ mes: '没有权限' })
        }
      })
    },
    getUrlParam (item) {
      let data = JSON.parse(JSON.stringify(this.params))
      data.shopId = item.id
      data.shopName = item.shop_name
      data.address = item.address
      return { name: 'shopPeople', params: data }
    },
    bindQRCode: function (code) {
      this.$refs.qrCode.innerHTML = ''
      console.log(code)
      let qrcode = new QRcode('qrCode', {
        width: 200,
        height: 200, // 高度
        text: code, // 二维码内容
        render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',
        // foreground: '#ff0'
      })
      console.log(qrcode)
    },
    showCode (item) {
      this.show1 = true
      this.bindQRCode(item.order_no)
    },
    del (item) {
      delOrder(item.id).then(ret => {
        if (ret.data.errcode === 1001) {
          this.$dialog.toast({ mes: '删除成功' })
          this.getShopList()
        } else {
          this.$dialog.toast({ mes: '没有权限' })
        }
      })
    }
  },
  mounted () {
    this.getShopList()
  }
}
</script>

<style scoped>
    .list-page >>> .yd-list-img {
        width: auto;
    }

    .list-page .yd-list-item {
        height: 1.5rem;
    }

    .order-img {
        border-radius: 5px;
    }

    .wl-order-qrcode {
        background: white;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .qrcode-btn {
        margin-top: 5px;
    }
</style>
